<template>
  <div>
    <div style="background: rgb(39 39 39)">
      <div
          style="height:70px; width: 1200px;padding: 0px; margin: 0 auto">

        <div id="navbar" class="navbar-collapse collapse">
          <div v-if="isDev !== 'development'" class="pull-left site-desc" style="float: left;padding-top: 10px;">
            <h1 class="auto-shake"><a data-original-title="一个程序员的个人博客，心之所向，无所不能"
                                      data-toggle="tooltip" data-placement="bottom">陀飞轮-技术分享博客 </a></h1>
            <p class="site-description">一个程序员的个人博客，心之所向，无所不能《当前版本 bet1.0 测试版》</p>
          </div>
          <div class="hello" style="text-align: right;padding-top: 25px;">

            {{ isLogin ? id && '欢迎你 ！' + id.username : '欢迎注册我的技术博客网站！' }}
            <template v-if="!isLogin">
              <router-link tag="a" to="/login">
                登录
              </router-link>
              <router-link tag="a" to="/register">
                注册
              </router-link>
            </template>
            <router-link tag="a" to="/">
              首页
            </router-link>
            <router-link tag="a" to="/grzx" v-if="isLogin && jshF(1)">
              发布个人文章
            </router-link>
            <router-link tag="a" to="/pixijs" v-if="isLogin && jshF(3)">
              我的网盘
            </router-link>
            <router-link tag="a" to="/gren" v-if="isLogin">
              个人中心
            </router-link>
            <a @click="tuichu" v-if="isLogin">退出登录</a>

          </div>
        </div>
      </div>

    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'


export default {
  name: 'HelloWorld',
  data () {
    return {
      isDev:process.env.NODE_ENV,
      id: JSON.parse(localStorage.getItem('id')),
      isHuifu: localStorage.getItem('token') ? (JSON.parse(localStorage.getItem('id')).authority ? JSON.parse(localStorage.getItem('id')).authority.find(i => i.id === 1) : false) : false,
      msg: 'Welcome to Your Vue.js App',
      arr: [],
      isLogin: !!localStorage.getItem('token')
    }
  },

  computed: {
    ...mapState(['userInfo'])
  },
  mounted () {
    if (this.isLogin) {
      this.$store.dispatch('getser', localStorage.getItem('id'))
    }
  },
  methods: {
    tuichu () {
      localStorage.removeItem('token')
      this.$router.push('/')
      window.location.reload()
    },
    jshF (qxid) {
      return this.$store.getters.qx.find(i => i.id === qxid)
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
